axios.get('../../php/getPlayerInfo.php').then(res => {
  console.log(res.data)
  renderShooter(res.data.shooter)
  renderHeight(res.data.height, res.data.avg)
  renderAge(res.data.age)
})

//渲染射手榜
const renderShooter = (data) => {
  var chartDom = document.getElementById('box1')
  var myChart = echarts.init(chartDom)
  var option

  var passed_array = data
  //显示数组中的元素
  let pieList = []
  let name = []

  for (let i = 0;i < passed_array.length;i++) {
    var d = new Object()
    name.push(passed_array[i]['name'])
    d.value = passed_array[i]['value']
    switch (i) {
      case 0:
        d.itemStyle = { color: '#8A2BE2' }
        break
      case 1:
        d.itemStyle = { color: '#FF6347' }
        break
      case 2:
        d.itemStyle = { color: '#00CED1' }
        break
      case 3:
        d.itemStyle = { color: '#32CD32' }
        break
      case 4:
        d.itemStyle = { color: '#FFD700' }
        break
      default: break
    }
    pieList.push(d)
  }
  // console.log(pieList)

  option = {
    tooltip: {},
    xAxis: {},
    yAxis: {
      type: "category",
      data: name,
      axisTick: { alignWithLabel: true },
      inverse: true,
    },
    series: [{
      name: '进球数',
      type: 'bar',
      data: pieList
    }]
  }

  option && myChart.setOption(option)
}

//渲染身高分布
const renderHeight = (data, avg) => {
  var chartDom = document.getElementById('box2')
  var myChart = echarts.init(chartDom)
  var option

  let avgHight = parseFloat(avg.avg)
  var passed_array = data
  //显示数组中的元素
  let heightData = []
  let name = []

  //定义负数放右边，正数放左边
  const labelRight = {
    position: 'right'
  }
  const labelLeft = {
    position: 'left'
  }

  for (let i = 0;i < passed_array.length;i++) {
    var d = new Object()
    name.push(passed_array[i]['name'])
    let diff = +passed_array[i]['value'] - avgHight
    d.value = diff
    if (diff < 0) {
      d.label = labelRight
    }
    else {
      d.label = labelLeft
    }
    d.itemStyle = { color: '#16baaa' }
    heightData.push(d)
  }


  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        var value = params[0].data // 获取数据项的值
        return '身高: ' + (value.value + avgHight)
      }
    },
    grid: {
      top: 30,
      bottom: 30
    },
    xAxis: {
      type: 'value',
      position: 'top',
      axisLabel: {
        formatter: (value) => {
          return value + avgHight
        }
      },
      min: function (value) {
        return (Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min * 1.05).toFixed(2)
      },
      max: function (value) {
        return (Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2)
      },
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'category',
      axisLine: {
        show: false,
        onZero: false
      },
      axisLabel: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      data: name
    },
    series: [
      {
        name: '身高',
        type: 'bar',
        stack: 'Total',
        label: {
          show: true,
          formatter: '{b}'
        },
        data: heightData
      }
    ]
  }

  option && myChart.setOption(option)

}

//渲染年龄分布
const renderAge = (data) => {
  var chartDom = document.getElementById('box3')
  var myChart = echarts.init(chartDom)
  var option

  var passed_array = data
  //显示数组中的元素
  let name = []
  let value = []

  for (let i = 0;i < passed_array.length;i++) {
    name.push(passed_array[i]['name'])
    value.push(passed_array[i]['value'])
  }
  console.log(name)

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b} : {c}'
    },
    xAxis: {
      type: 'category',
      data: name,
      axisLabel: {
        rotate: 45 // 设置标签的旋转角度，以度为单位
      }
    },
    yAxis: {
      type: 'value',
      min: 20, // 设置 y 轴的最小值
      max: 40 // 设置 y 轴的最大值
    },
    series: [
      {
        data: value,
        type: 'line',

        markLine: {
          data: [
            {
              type: "average",
              name: "平均值"
            }
          ]
        }
      }
    ]
  }

  option && myChart.setOption(option)
}